<template>
  <div class="app-container">
    <el-row>
      <!-- 搜索区域 -->
      <el-card style="margin:0 0 5px 5px">
        <div slot="header" class="clearfix">
          <label style="font-size: 26px;">开通会员</label>
        </div>
        <el-row :gutter="20">
          <spu-detail ref="spu_detail" :spu-id="2" :show-catalog="false" @change="changeSkuInfo" />
        </el-row>
        <el-row :gutter="20" class="m-t-20">
          <label class="m-l-20" style="font-size: 30px">￥{{ skuInfo.price }}</label>
          <el-button class="m-r-20 fr" v-if="hasLoaded" type="primary" icon="el-icon-check" @click="onSubmit">立即购买</el-button>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
const SpuDetail = () => import('@/views/mall/product/spu/form')

export default {
  components: {
    SpuDetail
  },
  data() {
    return {
      hasLoaded: false,
      openSpuDetail: false,
      skuInfo: {}
    }
  },
  destroyed() {
    this.hasLoaded = false
  },
  methods: {
    getImageSrc(value) {
      return this.$api.getImageSrc(value)
    },
    changeSkuInfo(skuInfo) {
      this.skuInfo = skuInfo
      this.hasLoaded = true
    },
    onSubmit() {
      this.$router.push('/order/confirm?skuIds=' + this.skuInfo.skuId)
    }
  }
}
</script>
